<template>
  <div id="cancelOrderReason">
    <div class="header2" ref="header">
      <div class="goback" @click="handleCancle"><i class="icon icon-left"></i></div>
      <div class="title">取消原因</div>
      <div class="actions"></div>
    </div>
    <div ref="content" style="overflow-y: auto;-webkit-overflow-scrolling: touch;">
      <p class="orange-notice vux-1px-t">若单日取消运单3次，将导致当日无法派单，请您注意！</p>
      <p class="notice vux-1px-t text-gray" style="line-height: 0.9rem; padding: 0rem 0.2rem">选择取消原因</p>
      <group>
        <cell :title="item.label" v-for="(item, index) in reasonList" :class="[item.isCheck? 'text-orange': '']" :key="index" @click.native="changeReason(index)">
          <div slot="value" v-if="item.isCheck">
            <span class="text-orange"><i class="icon icon-gou"></i></span>
          </div>
        </cell>
      </group>
    </div>
    <div class="fiexd-btn vux-1px-t" ref="btn">
      <div class="flex-auto">
        <x-button type="primary" action-type="button" @click.native="handleSub">确认</x-button>
      </div>
    </div>
  </div>
</template>
<script>
import { Cell } from 'vux'
export default{
  name: 'cancelOrderReason',
  components: {
    Cell
  },
  created() {
    this.$http.post($config.host + '/api/Comment/getCancelList', qs.stringify({
      uid: this.$store.state.userInfo.uid,
      client: $config.client_type,
      device: $config.device_type,
      token: this.$store.state.userInfo.token
    })).then(res => {
      const {code, data} = res.data
      if(code == 1 && data){
        let newData = []
        data.data.map(item => {
          newData.push({
            value: item.id,
            label: item.content,
            isCheck: false
          })
        })
        this.reasonList = newData
      }
    })
  },
  mounted() {
    const bodyHeight = document.documentElement.clientHeight
    const headerHeight = this.$refs['header'].offsetHeight
    const btnHeight = this.$refs['btn'].offsetHeight
    const pensonHeight = bodyHeight - headerHeight - btnHeight
    this.$refs['content'].style.height = pensonHeight + 'px'
  },
  data() {
    return {
      reason: '',
      reasonList: [],
      prevIndex: null
    }
  },
  methods: {
    handleCancle() {
      this.$emit('on-cancle')
    },
    handleSub() {
      if(this.prevIndex !== null && this.reasonList[this.prevIndex].isCheck == true){
        this.$emit('on-submit', this.reason)
        this.reasonList[this.prevIndex].isCheck = false
        this.prevIndex = null
      } else {
        this.$vux.toast.text('请选择取消原因', 'middle')
      }

    },
    changeReason(index) {
      if(this.prevIndex !== null) {
        this.reasonList[this.prevIndex].isCheck = false
      }
      this.reasonList[index].isCheck = true
      this.reason = this.reasonList[index].value
      this.prevIndex = index
    }
  }
}
</script>
<style scoped>
  .fiexd-btn{
    height: 1.1rem;
    background: #f3f4f5;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:88;
    padding: 0.1rem 0.2rem;
  }
  .orange-notice{
    height: 0.9rem;
    line-height: 0.9rem;
    color: #ff7a52;
    background: #ffeecf;
    padding-left: 0.2rem;
    font-size: 0.26rem;
  }
</style>
